<template>
  <view>
    <view class="search-bar">
      <!-- <uni-search-bar
        class="search-bar"
        radius="100"
        placeholder="输入股票代码/名称/拼音"
        bgColor="transpant"
        iconColor="#fff"
        cancelButton="none"
        @input="input"
        @confirm="search"
      /> -->
      <view class="search-box">
        <uni-icons
          color="#fff"
          class="uni-searchbar__box-icon-search icon-search"
          size="18"
          type="search"
        />
        <input
          class="input-search"
          placeholder="输入股票代码/名称/拼音"
          @input="onKeyInput"
          @confirm="search"
        />
      </view>
    </view>
    <view class="list">
      <view class="row title">
        <text class="col1">名称代码</text>
        <text class="col2">现价</text>
        <text class="col3">涨跌幅</text>
      </view>
      <view class="scroll">
        <view
          class="row"
          v-for="(item, index) in list"
          :key="index"
          @click="toDetail(item)"
        >
          <view class="col1">
            {{ item.name }}<text class="code">{{ item.code }}</text>
          </view>
          <view class="col2 price">{{ item.currentPrice }}</view>
          <view class="col3 label" :class="{ 'bg-green': item.isDecrease }">
            {{ item.rateOfChange }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import uniSearchBar from "@/components/uni-search-bar/uni-search-bar.vue";
  import uniIcons from "@/components/uni-icons/uni-icons.vue";
  export default {
    components: {
      uniSearchBar,
      uniIcons
    },
    data() {
      return {
        searchVal: "",
        list: [
          {
            id: 1,
            name: "白班科技",
            code: "603655",
            currentPrice: "9.000",
            rateOfChange: "1.24%",
            isDecrease: false
          },
          {
            id: 1,
            name: "白班科技",
            code: "603655",
            currentPrice: "9.000",
            rateOfChange: "1.24%",
            isDecrease: false
          },
          {
            id: 1,
            name: "白班科技",
            code: "603655",
            currentPrice: "9.000",
            rateOfChange: "-1.24%",
            isDecrease: true
          },
          {
            id: 1,
            name: "白班科技",
            code: "603655",
            currentPrice: "9.000",
            rateOfChange: "-1.24%",
            isDecrease: true
          },
          {
            id: 1,
            name: "白班科技",
            code: "603655",
            currentPrice: "9.000",
            rateOfChange: "-1.24%",
            isDecrease: true
          },
          {
            id: 1,
            name: "白班科技",
            code: "603655",
            currentPrice: "9.000",
            rateOfChange: "-1.24%",
            isDecrease: true
          },
          {
            id: 1,
            name: "白班科技",
            code: "603655",
            currentPrice: "9.000",
            rateOfChange: "-1.24%",
            isDecrease: true
          },
          {
            id: 1,
            name: "白班科技",
            code: "603655",
            currentPrice: "9.000",
            rateOfChange: "-1.24%",
            isDecrease: true
          },
          {
            id: 1,
            name: "白班科技",
            code: "603655",
            currentPrice: "9.000",
            rateOfChange: "-1.24%",
            isDecrease: true
          },
          {
            id: 1,
            name: "白班科技",
            code: "603655",
            currentPrice: "9.000",
            rateOfChange: "-1.24%",
            isDecrease: true
          },
          {
            id: 1,
            name: "白班科技",
            code: "603655",
            currentPrice: "9.000",
            rateOfChange: "-1.24%",
            isDecrease: true
          },
          {
            id: 1,
            name: "白班科技",
            code: "603655",
            currentPrice: "9.000",
            rateOfChange: "-1.24%",
            isDecrease: true
          },
          {
            id: 1,
            name: "白班科技",
            code: "603655",
            currentPrice: "9.000",
            rateOfChange: "-1.24%",
            isDecrease: true
          },
          {
            id: 1,
            name: "白班科技",
            code: "603655",
            currentPrice: "9.000",
            rateOfChange: "-1.24%",
            isDecrease: true
          },
          {
            id: 1,
            name: "白班科技",
            code: "603655",
            currentPrice: "9.000",
            rateOfChange: "-1.24%",
            isDecrease: true
          },
          {
            id: 1,
            name: "白班科技",
            code: "603655",
            currentPrice: "9.000",
            rateOfChange: "-1.24%",
            isDecrease: true
          },
          {
            id: 1,
            name: "白班科技",
            code: "603655",
            currentPrice: "9.000",
            rateOfChange: "-1.24%",
            isDecrease: true
          },
          {
            id: 1,
            name: "白班科技",
            code: "603655",
            currentPrice: "9.000",
            rateOfChange: "-1.24%",
            isDecrease: true
          }
        ]
      };
    },
    methods: {
      search(event) {
        uni.showToast({
          title: "搜索：" + event.target.value,
          icon: "none"
        });
      },
      onKeyInput: function(event) {
        this.searchVal = event.target.value;
        console.log("this.searchVal ", this.searchVal);
      },
      toDetail(data) {
        console.log("toDetail -> data", data);
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "@/common/scss/mixin.scss";
  $searchInputColor: #fff;
  /deep/ .uni-searchbar__box {
    border: 0;
  }
  /deep/ .uni-searchbar__box-search-input {
    color: $searchInputColor;
  }
  /deep/ .uni-searchbar__box-icon-search {
    color: $searchInputColor;
  }
  /deep/ .uni-searchbar__text-placeholder,
  .uni-input-placeholder {
    color: $searchInputColor;
  }
  /deep/ .uni-searchbar__cancel {
    color: $searchInputColor;
  }

  .search-box {
    position: relative;
    .icon-search {
      position: absolute;
      top: 15upx;
      left: 40upx;
    }
    .input-search {
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      border-radius: 100upx;
      margin: 20upx;
      padding: 10upx 20upx 10upx 60upx;
    }
  }

  .list {
    .row {
      @include flex(space-between, row, center);
      padding: 20upx;
      font-size: 32upx;
      .col1 {
        flex: 2;
      }
      .col2 {
        flex: 1;
      }
      .col3 {
        flex: 1;
        @include flex(center, row, center);
      }
    }
    .code {
      font-size: 26upx;
      color: #919090;
    }
    .price {
      color: red;
    }
    .label {
      padding: 8upx 0;
      background-color: #ff6060;
      color: #fff;
      border-radius: 10upx;
    }
    .title {
      font-size: 26upx;
      color: #919090;
    }
  }
  .bg-green {
    background-color: #45c650 !important;
  }
  .scroll {
    height: calc(100vh - 300upx);
    overflow-y: auto;
  }
</style>
